<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>演示组件的嵌套</title>
		<style>
			.a{
				background-color: skyblue;
				padding: 10px;
			}
			.b{
				background-color: orange;
				padding: 10px;
			}
		</style>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			class B extends React.Component{
				//组件将要接收props
				componentWillReceiveProps(){
					console.log('---B---componentWillReceiveProps---')
				}
				//“阀门”
				shouldComponentUpdate(){
					console.log('---B---shouldComponentUpdate---')
					return true
				}

				//组件将要更新 —— n次，n是更新的次数（前提：“阀门”要开启）
				componentWillUpdate(){
					console.log('---B---componentWillUpdate---')
				}

				//组件更新完成 —— n次，n是更新的次数（前提：“阀门”要开启）
				componentDidUpdate(){
					console.log('---B---componentDidUpdate---')
				}

				
				render(){
					console.log('---B---render---')
					return (
						<div className="b">
							<h4>我是B组件，我父亲给了我一台车：{this.props.car}</h4>
						</div>
					)
				}
			}

			class A extends React.Component{
				state = {car:'奥拓'}
				render(){
					return (
						<div className="a">
							<h4>我是A组件，我有台车：{this.state.car}</h4>
							<button onClick={this.changeCar}>发达了，换车</button>
							<B car={this.state.car}/>
						</div>
					)
				}
				changeCar = ()=>{
					this.setState({car:'奥迪'})
				}
			}

			ReactDOM.render(<A/>,document.getElementById('root'))			
		</script>
	</body>
</html>